<template>	
	<div class="page-index">
		<Swiper></Swiper>
		<div class="section-us container">
			<div class="intro-us">
				<div class="item">
					<i class="iconfont icon-team"></i>
					<div class="i-title">我们有专业的团队</div>
				</div>
				<div class="item">
					<i class="iconfont icon-Technology"></i>
					<div class="i-title">我们有专业的技术</div>
				</div>
				<div class="item">
					<i class="iconfont icon-jingyan"></i>
					<div class="i-title">我们有多年的经验</div>
				</div>
			</div>
		</div>
		<div class="section-products container">
			<div class="block-title">产品展示</div>
			<ProductList></ProductList>
			<a href="#" class="btn load-more">查看更多</a>
		</div>
		<div class="container">
			<div class="block-title">关于我们</div>
			<div class="aboutus">
				<div class="container">
					<img class="about-img" src="http://tpl-cb27c2b.pic32.websiteonline.cn/upload/lunbo001.jpg">
					<div class="about-desc">
				        XXXX家居装饰集团创建于199X年，集团致力于为国人提供真正的“XX家居解决方案”，业务范围涵盖专业家居装饰设计与施工、完整家居产品（整体卫 浴、整体厨房、整体木作、整体软饰）设计与生产、精工装项目合作、全国特许经营服务及国际业务项目等相关范畴。我们坚持以“作今日名牌，创百年企业” 为宗旨，坚持“品牌化、专业化、规模化、产业化”发展道路。迄今为止，集团已在全国18个城市设立全资子公司，并于58个城市授权成立了特许加盟机构......
					</div>
				</div>
			</div>
			<a href="#" class="btn load-more">查看更多</a>
		</div>
		<div class="section-news container">
			<div class="block-title">新闻动态</div>
			<NewsList></NewsList>
			<a href="#" class="btn load-more">查看更多</a>
		</div>
		<FooterBar></FooterBar>
	</div>
</template>	

<script>
	import Swiper from "../components/SwiperBanner.vue";
	import ProductList from "../components/Product_List.vue";
	import NewsList from "../components/News_List.vue";
	import FooterBar from "../components/Footer.vue"
	export default{
		components:{
			Swiper,
			ProductList,
			NewsList,
			FooterBar
		}
	}
</script>

<style lang="less">
.ellipsis{display: block;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.page-index{
	.intro-us{overflow: hidden;margin: 0.3rem 0;
		.item{width: 33.333333%;float: left;text-align: center;}
		.iconfont{font-size: 0.45rem;}
		.i-title{text-align: center;font-size: 0.12rem;.ellipsis;}
	}
	.block-title{font-size: 0.18rem;text-align: center;margin-bottom: 0.2rem;padding-bottom: 0.2rem;background: url(../assets/images/n-bg04.png) center bottom no-repeat;}
	.aboutus{
		.about-img{display: block;width: 100%;}
		.about-desc{font-size: 14px;line-height: 2;text-indent: 2em;margin-top: 15px;}
	}
	.load-more{margin: 20px 0 50px 0;}
} 
</style>